<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <link href="<%=request.getContextPath()%>/css/common.css" rel="stylesheet" />
    <title>华纵科技</title>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath() %>/js/echarts.js"></script>


</head>

<body class="kh-body">
<div class="h30">
    <div class="kh_top_m_d">



        <script type="text/javascript">

            $(function() {


                $.post("<%=request.getContextPath()%>/client/getDetailInfo",{id:"${id}"},function(data){

                    //初始化特征点列表
                    var tbody = "";
                    $.each(data.list,function(index,entry){
                        tbody +=
                            "<li>"+
                                "<span class='fl block w80 h55'><i class='block tel fl mart13  marl6'></i><font class='f14 blue lh50 b'>"+entry.statusname+"</font></span>"+
                                "<span class='fl block marl100 padt8'>"+
                                "<font class='gary f14'>视频时间：</font>"+entry.starttime+"<br />"+
                                "<font class='gary f14'>行为时间：</font>"+entry.endtime+
                                "</span>"+
                                "<span class='fl block marl100 lh50'>"+
                                "<font class='gary f14'>时长：</font>120s"+
                                "</span>"+
                                "<span class='fl block marl100 lh50 blue'><div class='dj-cj mart13 blue b'>严重等级："+entry.ifnotify+"</div></span>"+
                            "</li>";

                    })
                    $("#videoDetailList").html(tbody);

                    //初始化统计图1
                    jQuery.navlevel2 = function(level1, dytime) {

                        $(level1).mouseenter(function() {
                            varthis = $(this);
                            delytime = setTimeout(function() {
                                varthis.find('div').slideDown();
                            }, dytime);

                        });
                        $(level1).mouseleave(function() {
                            clearTimeout(delytime);
                            $(this).find('div').slideUp();
                        });

                    };
                    jQuery.navlevel2("div.kh_mainlevel", 200);

                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document
                        .getElementById('main'));

                    // 指定图表的配置项和数据
                    var option = {
                        color : [ 'red', '#2f4554', 'gray',
                            '#d48265', '#91c7ae', '#749f83',
                            '#ca8622', '#bda29a', '#6e7074',
                            '#546570', '#c4ccd3' ],
                        /* title : {
                            text : '--- 特征点数据分布 ---',
                            x : 'center',
                            y : 0,
                            textStyle : {
                                color : '#277EAB'
                            }
                        }, */
                        legend : {
                            data : [ '挥手', '起身', '电话', '离开','手比','坐' ],
                            align : 'right',
                            orient : 'right',
                            right : 0,
                            top : 50,
                            itemWidth : 10,
                            itemHeight : 10
                        },
                        grid: {
                            left: '3%',
                            right: '9%',
                            bottom: '15%',
                            top: '20%',
                            containLabel: true
                        },
                        xAxis : {
                            type : 'category',
                            boundaryGap : false,
                            data : data.timeArray1
                        },
                        yAxis : {
                            boundaryGap : false,
                            splitLine : {
                                show : false
                            },
                            data : [ '', '挥手', '起身', '电话', '离开','手比','坐'  ],
                        },
                        series : [
                            {
                                name : '挥手',
                                symbolSize : 20,
                                data : data.status1,
                                symbolSize : 8,
                                type : 'scatter'
                            },
                            {
                                name : '起身',
                                symbolSize : 20,
                                data : data.status2,
                                symbolSize : 8,
                                type : 'scatter'
                            },
                            {
                                name : '电话',
                                symbolSize : 20,
                                data : data.status3,
                                symbolSize : 8,
                                type : 'scatter'
                            },
                            {
                                name : '离开',
                                symbolSize : 20,
                                data : data.status4,
                                symbolSize : 8,
                                type : 'scatter'
                            },
                            {
                                name : '手比',
                                symbolSize : 20,
                                data : data.status5,
                                symbolSize : 8,
                                type : 'scatter'
                            },
                            {
                                name : '坐',
                                symbolSize : 20,
                                data : data.status6,
                                symbolSize : 8,
                                type : 'scatter'
                            }]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);

                    // 基于准备好的dom，初始化echarts实例
                    var myChart2 = echarts.init(document
                        .getElementById('main2'));

                    // 指定图表的配置项和数据
                    var xAxisData = data.timeArray;
                    var data = data.speedArray;
                    option2 = {
                        //backgroundColor: "white",
                        /* title: {
                             text: '“一带一路”传播趋势分析（月度）',
                             subtext:'纯属虚构',
                             x:'center',
                             top:'40',
                             textStyle: {
                                 color: "#fff",
                             }
                         },*/
                        grid: {
                            left: '3%',
                            right: '9%',
                            bottom: '15%',
                            top: '20%',
                            containLabel: true
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        /* toolbox: {
                            show: true,
                            feature: {
                                saveAsImage: {}
                            }
                        }, */
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: xAxisData,
                            splitLine: {
                                show: true,
                                interval: 'auto'
                            },
                            "axisLabel": {
                                textStyle: {
                                    fontFamily: "微软雅黑",
                                    fontSize: '14px',
                                    color: "blick",
                                    fontWeight:'normal',

                                }
                            },
                        },
                        yAxis: {
                            type: 'value',
                            axisLine: {
                                lineStyle: {
                                    color:"blick"
                                }
                            },
                        },
                        series: [{
                            name: '速度',
                            type: 'line',
                            smooth: true,
                            data: data,
                            itemStyle: {
                                normal: {
                                    lineStyle: {
                                        color: '#00CCFF'
                                    }
                                }
                            }
                        }]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart2.setOption(option2);



                },"json")






                $(".detailbtn").click(function(){
                    location.href = "<%=request.getContextPath()%>/client/lkjDetail?id=1";
                })

            })
        </script>

        <div class="kh_mainlevel">
            <span class="kh_top_m_a">用户中心</span>
            <div style="display: none;">
                <a href="#">用户中心</a> <a href="#">退出</a>
            </div>

        </div>
    </div>
</div>
<div class="h60 bg-white">
    <a href="#" class="khdlogo mar-lr40"></a>
</div>
<div class="h20"></div>
<div class="mar-lr40 bd1">
    <div class="mar-lr40 pad-tb40">
        <div class="fa7 f14">当前位置：视频管理 > <font class="f14 blue">视频详情</font></div>
        <div class="h20"></div>

        <div class="boxshaow fl g5 h450 bd1">
            <video src="http://192.168.138.139:8000/testabc_result.mp4" width="100%" height="100%" type="video/mp4" controls="controls" autoplay="autoplay" loop="loop"></video>
        </div>
        <div class="boxshaow fr g48 h450 bd1 bg-white">
            <div class="m3p1">
                <div class="img-train">特征点数据</div>
                <div class="h20"></div>
                <ul class="sp-ul" id="videoDetailList" style="overflow:auto;height:360px;">
<%--
                    <c:forEach items="${list}" var="obj">
--%>
                        <!-- <li>	开始时间:	结束时间: 时长:20s 严重等级: 是否警告:</li> -->
                        <%--<li>
                            <span class="fl block w80 h55"><i class="block tel fl mart13  marl6"></i><font class="f14 blue lh50 b">${obj.statusname}</font></span>
                            <span class="fl block marl100 padt8">
                            <font class="gary f14">视频时间：</font>${obj.starttime}<br />
                            <font class="gary f14">行为时间：</font>${obj.endtime}
                        </span>
                            <span class="fl block marl100 lh50">
                        	<font class="gary f14">时长：</font>120s

                        </span>
                            <span class="fl block marl100 lh50 blue"><div class="dj-cj mart13 blue b">严重等级：${obj.ifnotify }</div></span>
                        </li>--%>
<%--
                    </c:forEach>
--%>
                    <!--
                    <li>
                        <span class="fl block w80 h55"><i class="block clock fl  mart13  marl6"></i><font class="f14 blue lh50 b">睡觉</font></span>
                        <span class="fl block marl10 padt8">
                            <font class="gary f14">视频时间：</font>2018-01-01  10:05:05<br />
                            <font class="gary f14">行为时间：</font>2018-01-01  10:05:05
                        </span>
                        <span class="fl block marl10 lh50">
                            <font class="gary f14">时长：</font>120s

                        </span>
                        <span class="fl block marl10 lh50 blue"><div class="dj-cj mart13 blue b">严重等级：初级</div></span>

                    </li>
                    <li>
                        <span class="fl block w80 h55"><i class="block hand fl  mart13  marl6"></i><font class="f14 blue lh50 b">对比</font></span>
                        <span class="fl block marl10 padt8">
                            <font class="gary f14">视频时间：</font>2018-01-01  10:05:05<br />
                            <font class="gary f14">行为时间：</font>2018-01-01  10:05:05
                        </span>
                        <span class="fl block marl10 lh50">
                            <font class="gary f14">时长：</font>120s

                        </span>
                        <span class="fl block marl10 lh50 blue"><div class="dj-cj mart13 blue b">严重等级：初级</div></span>
                    </li>
                    <li>
                        <span class="fl block w80 h55"><i class="block leave fl  mart13  marl6"></i><font class="f14 blue lh50 b">离开</font></span>
                        <span class="fl block marl10 padt8">
                            <font class="gary f14">视频时间：</font>2018-01-01  10:05:05<br />
                            <font class="gary f14">行为时间：</font>2018-01-01  10:05:05
                        </span>
                        <span class="fl block marl10 lh50">
                            <font class="gary f14">时长：</font>120s

                        </span>
                        <span class="fl block marl10 lh50 blue"><div class="dj-zj mart13 red b">严重等级：中级</div></span>
                    </li>
                    <li>
                        <span class="fl block w80 h55"><i class="block leave fl  mart13  marl6"></i><font class="f14 blue lh50 b">离开</font></span>
                        <span class="fl block marl10 padt8">
                            <font class="gary f14">视频时间：</font>2018-01-01  10:05:05<br />
                            <font class="gary f14">行为时间：</font>2018-01-01  10:05:05
                        </span>
                        <span class="fl block marl10 lh50">
                            <font class="gary f14">时长：</font>120s

                        </span>
                        <span class="fl block marl10 lh50 blue"><div class="dj-zj mart13 red b">严重等级：中级</div></span>
                    </li>
                    <li>
                        <span class="fl block w80 h55"><i class="block leave fl  mart13  marl6"></i><font class="f14 blue lh50 b">离开</font></span>
                        <span class="fl block marl10 padt8">
                            <font class="gary f14">视频时间：</font>2018-01-01  10:05:05<br />
                            <font class="gary f14">行为时间：</font>2018-01-01  10:05:05
                        </span>
                        <span class="fl block marl10 lh50">
                            <font class="gary f14">时长：</font>120s

                        </span>
                        <span class="fl block marl10 lh50 blue"><div class="dj-zj mart13 red b">严重等级：中级</div></span>
                    </li> -->
                </ul>
                <div class="h20"></div>
                <!-- <div class="tc sp-ul-a" ><a href="#">< <</a>    <a href="#">1</a>   <a href="#">2</a>   <a href="#">3</a>     <a href="#">> ></a></div> -->

            </div>
        </div>


        <div class="clear h20"></div>

        <div style="height: 270px;" class="boxshaow fl g5 bd1 bg-white">

            <div class="h10"></div>
            <div class="img-train">速度曲线</div>
            <div class="" style="line-height: 91px;font-size: 14px;padding-left: 60px;color: #5db8f1;"><font class="detailbtn">详情 >></font></div>
            <div>
                <div id="main2" style="width: 920px;height: 240px;"></div>
            </div>

        </div>

        <div style="height: 270px;" class="boxshaow fr g48 bd1 bg-white">
            <div class="h10"></div>
            <div class="img-train">特征点数据分布</div>
            <div class="h10"></div>
            <div>
                <div id="main" style="width: 800px;height: 240px;margin-left: 20px"></div>
            </div>
        </div>

        <div class="clear"></div>
    </div>
</div>
<div class="clear h20"></div>
</body>
</html>